<template>
	<view>
		<view id="pusher" style="transform:rotateY(180deg);"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'rtmp://vpush.qdd88.cn/live/621FD133-889D-1707-CF0E-83A8A715D412?auth_key=1604707200-0-0-cd741fc8240f348cce28ed9db7cdfc3d',
				pusher: null,
				windowHeight: '0px',
				isPushing: false,
				mode: 'FHD',
				muted: false,
				width: '100%',
				height: '100%',
				position: 'static',
				beauty: 0,
				whiteness: 0,
				aspect: '9:16',
				enableCamera: true,
				autoFocus: true,
				minBitrate: 2500,
				maxBitrate: 5000,
			};
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight + 'px';
			uni.$on('onStart', this.onStart)
			uni.$on('onSwitchCamera', this.onSwitchCamera)
			uni.$on('onMuted', this.onMuted)
		},
		onShow() {
			const currentWebview = this.$scope.$getAppWebview()
			this.pusher = new plus.video.LivePusher('pusher', {
				url: this.url,
				mode: this.mode,
				muted: this.muted,
				width: this.width,
				height: this.height,
				position: this.position,
				beauty: this.beauty,
				whiteness: this.whiteness,
				aspect: this.aspect,
				'enable-camera': this.enableCamera,
				'auto-focus': this.autoFocus,
				'min-bitrate': this.minBitrate,
				'max-bitrate:': this.maxBitrate,
			});
			// 监听状态变化事件
			this.pusher.addEventListener('statechange', (e) => {
				console.log('statechange: ' + JSON.stringify(e));
			}, false);
			this.pusher.addEventListener('netstatus', (e) => {
				console.log('statechange: ' + JSON.stringify(e));
			}, false);
			this.pusher.addEventListener('error', (e) => {
				console.log('statechange: ' + JSON.stringify(e));
			}, false);
			currentWebview.append(this.pusher)
		},
		methods: {
			onStart() {
				this.isPushing = !this.isPushing
				if (this.isPushing) {
					this.pusher.start()
				} else {
					this.pusher.pause()
				}
			},
			onSwitchCamera() {
				console.log('ok')
				this.pusher.switchCamera()
			},
			onMuted() {
				this.muted = !this.muted
				this.pusher.setStyles({
					muted: this.muted
				})
			}
		}
	};
</script>

<style>

</style>
